<template>
	<view class="gelp-page">
		<view class="type-box">

			<!-- <span class="name1">考试状态:</span> -->
			<view class="item_type">
				<span class="item" v-for="(item,index) in typeLIst1" :class="{active:index==current}"
					@click="getData(index)">{{item.name}}</span>
			</view>

			<!-- 		  <view class="data">
		    <span class="name1">类 型:</span>
			<view class="item_type">
				 <span class="item" v-for="(item,index) in typeLIst2" :class="{active:index==current1}" @click="getclassify(item.id,index)">{{item.name}}</span>
			</view>
		   
		  </view> -->
		</view>

		<scroll-view scroll-y @scrolltolower="loadMore" class="main-box" v-show="show">
			<!-- <h3 class="top-title">所有培训计划</h3> -->
			<view class="all-train">
				<view class="exam-item" v-for="(item,index) in paperList"
					@click="item.educationKaoshi.kaoshiStu=='1' && item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='0'  && gokaoshi()">
					<span class="name" :title="item.name">{{item.educationKaoshi.name}}</span>

					<!-- <span class="line"></span> -->

					<view class="item">
						<view class="exam-info">
							<view class="stop-time">考试截至时间:&nbsp;&nbsp;{{item.educationKaoshi.endTime}}</view>
							<view class="exam-time">考试时间:&nbsp;&nbsp;{{item.educationKaoshi.startTime}}</view>
							<view class="person-num">
								参加人数: {{item.educationKaoshi.userKaoshiCount}} 人
							</view>


							<view class="baoming_list">

								<!-- <view class="staandname"> -->
								<span class="status" v-show="item.educationKaoshi.kaoshiStu=='1'">正在考试</span>
								<span class="status" v-show="item.educationKaoshi.kaoshiStu=='2'">考试结束</span>
								<span class="status" v-show="item.educationKaoshi.kaoshiStu=='3'">考试未开始</span>
								<!-- </view> -->

								<!-- <view class="is-sign-up0" v-show="item.baoming=='1'">
									<span class="signup">报名未开始</span>
								</view>

								<view class="is-sign-up0" v-show="item.baoming=='3'&&item.joinFlag =='0'">
									<span class="signup">报名结束</span>
								</view> -->


								<view class="is-sign-up1"
									v-show="item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='0' "
									@click="gokaoshi()">
									<span class="signup">开始考试</span>
								</view>


								<view class="is-sign-up2" v-show="item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='1'"
									@click="chaChengji()">
									<span class="chenggong">查看成绩</span>
								</view>

								<!-- 								<view class="is-sign-up3"
									v-show="item.educationKaoshi.kaoshiStu=='1' && item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='1'">
									<span class="chenggong">查看成绩</span>
								</view> -->

							</view>


						</view>




					</view>

					<view style="clear:both"></view>
				</view>
			</view>
			<nodata v-show="paperList.length==0&&start"></nodata>
			<view class="end-text" v-show="start && end &&paperList.length!=0">已经到底啦...</view>
			<button class="end-text uni-icons " v-show="load" loading="true">数据加载中...</button>
		</scroll-view>
	</view>

</template>

<script>
	import Cookies from 'js-cookie'
	import nodata from '@/components/nodata.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				end: false,
				load: false,
				start: false,
				loadingTxt: '加载更多',
				total: null,
				paperList: [],
				show: true,
				current: 0,
				current1: 0,
				typeLIst2: [],
				type: '',
				pageNo: 1,
				pageSize: 8,
				input: '',
				list1: [


				],
				typeLIst1: [{
						name: '全部',
						addClass: 'active',
					},
					{
						name: '正在考试',
						addClass: '',
					},
					{
						name: '考试结束',
						addClass: '',
					},
					{
						name: '考试未开始',
						addClass: '',
					},
				],
			}
		},
		onLoad() {
			this.getData(this.current);
			// this.gettreeName();
		},

		methods: {
			gokaoshi(){
				uni.showModal({
					title: '提示',
					content: '请登录电脑端参加考试！',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			chaChengji(){
				uni.showModal({
					title: '提示',
					content: '请到电脑端查看成绩！',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});			
			},
			loadMore() {
				if (!this.load && !this.end) {
					this.load = true;
					this.pageNo = this.pageNo + 1;
					setTimeout(() => {
						console.log(this.current, 55555)
						// this.getbaomingFlag(this.current);
						this.getData(this.current);
					}, 1000)
				}
			},
			async getPersonInfo() {
				let that = this;
				await this.$http.post("/f/userDetail")
					.then(function(response) {
						let obj = response.data;
						uni.setStorageSync("userData", JSON.stringify(obj));
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			async goContent(url) {

				await this.getPersonInfo();
				if (uni.getStorageSync('userData')) {
					this.userData = JSON.parse(uni.getStorageSync('userData'))
					console.log(this.userData, 555)
					if (this.userData.face) {
						// this.$router.push({name:url,params:item});
						uni.navigateTo({
							url: url
						})
					} else {
						let that = this;
						uni.showModal({
							title: '提示',
							content: '您没人脸照片，请先上传人脸照片！',
							success: function(res) {
								if (res.confirm) {
									uni.chooseImage({
										success: (chooseImageRes) => {
											const tempFilePaths = chooseImageRes.tempFilePaths;
											const url = that.$url + '/cloud/uploadFace';
											uni.uploadFile({
												url: url, //仅为示例，非真实的接口地址
												filePath: tempFilePaths[0],
												header: {
													token: uni.getStorageSync("token")
												},
												// formData: {
												//     'user': 'test'
												// },
												success: (uploadFileRes) => {
													console.log(uploadFileRes
														.data);
													uni.showToast({
														title: '上传成功',
														duration: 2000
													})
												},
												fail: (error) => {
													console.log(error);
													uni.showToast({
														title: '上传失败请重新上传',
														icon: 'none',
														duration: 2000
													})
												}
											});
										}
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						console.log("您没人脸照片，请先上传人脸照片！")
						this.dialogTableVisible = true;
					}

				} else {
					// this.$router.push("/login")
					uni.navigateTo({
						url: "../login/login"
					})
				}

			},
			getbaomingFlag(index) {
				if (this.current != index) {
					this.pageNo = 1;
					this.current = index;
					this.end = false;
				} else {
					this.current = index;
				}

				// this.pageNo = 1;
				// if (this.baomingFlag != num) {
				// 	this.baomingFlag = num;
				// 	this.pageNo = 1;
				// }
				if (this.current == 0) {
					this.baomingFlag = null;
				}
				if (this.current == 1) {
					this.baomingFlag = 1;
				}
				if (this.current == 2) {
					this.baomingFlag = 2;
				}
				if(this.current == 3){
					this.baomingFlag = 0;
				}
			},
			//考试类型赋值
			getclassify(id, index) {
				this.current1 = index;
				console.log(id);
				if (this.classify != id) {
					this.classify = id;
					this.getData()
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			getData(current) {
				let that = this;
				this.loading = true;

				this.getbaomingFlag(current);
				this.$http.post("/f/pageUserKaoshi?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize +
						"&kaoshiTimeFlag=" + this.baomingFlag + "&classify=" + this.classify)
					.then(function(response) {
						console.log(response, 9090)
						that.start = true;
						let list = response.data;
						that.total = response.count;
						console.log(list)
						if (list.length != 0) {
							let starttime;
							let endtime;
							let nowtime = new Date().getTime();
							let start, end;
							list.forEach((item, i) => {
								console.log(item.educationKaoshi.startTime)
								console.log(item.educationKaoshi.endTime)
								start = item.educationKaoshi.startTime;
								start = start.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
								starttime = new Date(start).getTime()

								end = item.educationKaoshi.endTime;
								end = end.replace(/-/g, '/');
								endtime = new Date(end).getTime()

								if (starttime < nowtime && nowtime < endtime) {
									//正在考试
									item.educationKaoshi.kaoshiStu = '1'
								}
								if (endtime < nowtime) {
									//考试结束
									item.educationKaoshi.kaoshiStu = '2'
								}
								if (starttime > nowtime) {
									//考试未开始
									item.educationKaoshi.kaoshiStu = '3'
								}
							})
						}
						console.log('hha ')
						console.log(list)
						that.paperList = list;
						that.loading = false;
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},

			goSearch() {
				uni.navigateTo({
					url: 'helpSearch'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			search() {

			},
			change(item) {
				this.current = item.detail.current;
			},
			goSelect() {
				console.log(222)
			},
			//得到考试的类型
			gettreeName() {
				let that = this;
				this.$http.get("/f/listPaperClassify")
					.then(function(response) {
						console.log(response, 10086)
						let list = response.data;
						if (list.length != 0) {
							list.forEach((item, i) => {
								if (item.treeName == 'a') {
									item.name = "必修"
								}
								if (item.treeName == 'b') {
									item.name = "选修"
								}
							})
							list.unshift({
								'id': '',
								'treeName': '',
								'name': '全部',
								'addClass': 'active'
							})
							that.typeLIst2 = list;
							console.log(that.typeLIst2, 99999)
						}
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			select(index) {
				this.active = index;
				this.typeList.forEach((item, i) => {
					if (i == index) {
						item.addClass = "active";
						this.type = item.id;
						this.getData();
					} else {
						item.addClass = ""
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.gelp-page {
		width: 100%;
		height: 100%;
		// overflow-y: auto;
		background: #f7f7f7;
		position: relative;

		.type-box {
			width: 100%;
			height: 60rpx;
			// margin: 20rpx 0;
			padding: 20rpx 0;

			.item_type {
				display: flex;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				// padding: 5rpx 10rpx;
				justify-content: center;
			}

			.item {
				// margin-left: 10rpx;
				height: 100%;
				width: 24%;
				justify-content: center;
				// padding: 0 10rpx;
				font-size: 14px;
				color: #0076CA;
				cursor: pointer;
				text-align: center;
				border: 1rpx solid #0076CA;
			}

			.active {
				background: #0076CA;
				border-radius: 3rpx;
				color: #fff;
			}
		}

		.main-box {
			width: 100%;
			height: calc(100% - 100rpx);
			// overflow-y: scroll;

			.all-train {
				width: 100%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-bottom: 60rpx;

				.exam-item {
					background-color: white;
					margin-top: 10px;
					width: 90%;
					height: 300rpx;
					box-shadow: 0px 0px 4px 2px #c8dbe5;
					// border: 1rpx solid rgba(255, 255, 255, 100);
					// padding: 27rpx 17rpx 20rpx 30rpx;
				
					.name {
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						background: #0076CA;
						// text-indent:1em;
						color: white;
						font-size: 20px;
						text-align: left;
						font-family: PingFangSC-regular;
					}
				
					.line {
						border: 1px solid #0076CA;
						width: 100%;
						margin: 5px 0 5px 0;
					}
				
					.item {
						// display: flex;
						// justify-content: space-between;
						// width: 100%;
						// height: 100rpx;
						padding: 27rpx 17rpx 20rpx 30rpx;
						// padding-right: 70rpx;
						.exam-info {
							// display: flex;
							// flex-direction: column;
							width: 100%;
				
							.staandname {}
				
							.stop-time {
								// width: 214rpx;
								// height: 20rpx;
								color: #9D9B9B;
								font-size: 14px;
								text-align: left;
								font-family: PingFangSC-regular;
								margin-top: 6rpx;
							}
				
							.exam-time {
								// width: 186rpx;
								// height: 20rpx;
								color: #9D9B9B;
								font-size: 14px;
								text-align: left;
								font-family: PingFangSC-regular;
								margin-top: 6rpx;
							}
				
						}
				
						.person-num {
							// margin-top: 50rpx;
							width: 100%;
							// height: 20rpx;
							color: #9D9B9B;
							font-size: 14px;
							text-align: left;
							font-family: PingFangSC-regular;
							margin-top: 6rpx;
						}
				
						.baoming_list {
							width: 100%;
							height: 80rpx;
				
							.status {
								margin-top: 24rpx;
								float: left;
								width: 160rpx;
								height: 100%;
								color: rgba(242, 45, 45, 100);
								font-size: 14px;
								font-family: PingFangSC-regular;
								line-height: 80rpx;
							}
				
							.is-sign-up0 {
								float: right;
								cursor: pointer;
								margin-top: 24rpx;
								width: 134rpx;
								height: 50rpx;
								border-radius: 4rpx;
								background-color: rgba(157, 155, 155, 100);
								text-align: center;
								border: 1rpx solid rgba(187, 187, 187, 100);
				
								.signup {
									line-height: 30rpx;
									width: 56rpx;
									height: 20rpx;
									color: rgba(253, 253, 255, 100);
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
								}
							}
				
							.is-sign-up1 {
								float: right;
								cursor: pointer;
								margin-top: 24rpx;
								width: 134rpx;
								height: 50rpx;
								border-radius: 4rpx;
								background-color: #0076CA;
								text-align: center;
								border: 1rpx solid rgba(187, 187, 187, 100);
				
								.signup {
									line-height: 30rpx;
									width: 56rpx;
									height: 20rpx;
									color: white;
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
								}
							}
				
							.is-sign-up2 {
								float: right;
								margin-top: 24rpx;
								width: 134rpx;
								height: 50rpx;
								border-radius: 4rpx;
								background-color: rgba(238, 92, 92, 100);
								text-align: center;
								border: 1rpx solid rgba(187, 187, 187, 100);
				
								.chenggong {
									line-height: 30rpx;
									width: 56rpx;
									height: 20rpx;
									color: rgba(253, 253, 255, 100);
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
								}
							}
				
							.dengdai {
								display: flex;
								flex-direction: column;
								align-items: center;
								float: right;
				
								.is-sign-up3 {
									float: right;
									// margin-top: 24rpx;
									width: 134rpx;
									height: 50rpx;
									border-radius: 4rpx;
									background-color: rgba(157, 155, 155, 100);
									text-align: center;
									border: 1rpx solid rgba(187, 187, 187, 100);
				
									.yibaoming {
										line-height: 50rpx;
										width: 56rpx;
										height: 50rpx;
										color: rgba(253, 253, 255, 100);
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
									}
								}
				
								.shenghe {
									// width: 56rpx;
									height: 20rpx;
									color: rgba(242, 45, 45, 100);
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
									text-align: center;
								}
							}
						}
				
				
					}
				
				}

			}
		}

		.loading {
			line-height: 2em;
			text-align: center;
			color: #888;
			margin-top: 30rpx;
		}

		.paginatio {
			width: 100%;
			height: 80rpx;
			position: fixed;
			bottom: 0;
			text-align: center;
			display: flex;
			justify-content: space-around;

			.pag {
				display: flex;
				align-items: center;

			}
		}
	}
</style>
